  <template>
  <div>
    <el-button @click="$refs.FormsRef.openDialog()">添加</el-button>
    <el-form label-width="120px" :model="form" ref="forma" :rules="rules">
      <div v-for="(item, index) in option" :key="index">
        <el-form-item :prop="item.inputType" :label="item.label">
          <!-- 文本 -->
          <template v-if="item.type == 'input'">
            <el-input
              v-model="form[item.inputType]"
              :disabled="readonly"
              style="max-width: 600px"
              :placeholder="item.tips"
            ></el-input>
          </template>
          <!-- 单选项 -->
          <template v-else-if="item.type == 'radio'">
            <el-radio-group
              v-model="form[item.inputType]"
              @change="handleChange"
              :disabled="readonly"
            >
              <el-radio
                v-for="(it, idx) in item.options"
                :key="idx"
                :label="idx"
                >{{ it }}</el-radio
              >
            </el-radio-group>
          </template>
          <!-- 多选项 -->
          <template v-else-if="item.type == 'checkbox'">
            <el-checkbox-group
              v-model="form[item.inputType]"
              @change="handleChange"
              :disabled="readonly"
            >
              <el-checkbox
                v-for="(it, idx) in item.options"
                :key="idx"
                :label="idx"
                >{{ it }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </el-form-item>
      </div>
    </el-form>

    <Forms ref="FormsRef" @submits="emits" />
    <el-button @click="sub">提交</el-button>
  </div>
</template>


<script>
import Forms from "./form";
export default {
  components: {
    Forms,
  },
  data() {
    return {
      option: [],
      form: {},
      readonly: false,
      rules: {},
    };
  },
  methods: {
    handleChange() {
      this.getFieldsVal();
    },
    // setValByType(type) {
    //   let val = "";
    //   switch (type) {
    //     case "checkbox":
    //       val = [];
    //       break;
    //     default:
    //       val = "";
    //   }
    //   return val;
    // },
    // setForm(val) {
    //   if (val) {
    //     let formList = JSON.parse(val);
    //     let form = {};
    //     // 判断新增或者修改
    //     if (this.templateVal) {
    //       form = JSON.parse(this.templateVal);
    //     } else {
    //       formList.map((item) => {
    //         form[item._vModel] = this.setValByType(item.type);
    //       });
    //     }
    //     this.option = formList;
    //     this.form = form;
    //     // console.log(this.formList)
    //   }
    // },
    // 获取字段数据取值
    getFieldsVal(verify = true) {
      let pass = true;
      // 校验必填项
      let data = JSON.parse(JSON.stringify(this.option));
      //   let form = this.form;

      if (verify) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].mustFill == "1") {
            Object.defineProperty(this.rules, [data[i].inputType], {
              value: {
                required: true,
                message: data[i].label + "必填！",
                trigger: "blur",
              },
            });
          }
        }
      }
      //     for (let i = 0; i < data.length; i++) {
      //       if (data[i].mustFill == "1") {
      //         // 判断类型
      //         let type = data[i].type;
      //         if (type == "input") {
      //           if (!this.form[data[i].inputType]) {
      //             // this.$message.error(data[i].label + "必填！");
      //             pass = false;
      //             break;
      //           }
      //         } else if (type == "checkbox") {
      //           if (0 == form[data[i].inputType].length) {
      //             // this.$message.error(data[i].label + "必填！");
      //             pass = false;
      //             break;
      //           }
      //         } else if (type == "radio") {
      //           if (typeof form[data[i].inputType] != "number") {
      //             let message =
      //               type == "radio"
      //                 ? `请选择${data[i].label}！`
      //                 : `${data[i].label}填写有误！`;
      //             this.$message.error(message);
      //             pass = false;
      //             break;
      //           }
      //         }
      //       }
      //     }
      //   }
      //   if (pass) {
      //     return this.form;
      //   } else {
      //     return false;
      //   }
    },
    sub() {
      //   console.log(this.$refs.forma);
      this.$refs.forma.validate((valid) => {
        console.log(this.form, 111);
        console.log(valid);
      });
    },

    // 子组件返回值
    emits(val) {
      this.form = {};
      this.rules = {};

      if (this.option.length == 0) {
        this.option.push(JSON.parse(val));
      } else {
        this.option.forEach((value) => {
          console.log(111);
          if (value.inputType != JSON.parse(val).inputType) {
            this.option.push(JSON.parse(val));
          }
        });
      }
      this.handleChange();
    },
  },
};
</script>

<style lang="" scoped>
</style>